<template>
  <div class="info_container">
    <!-- 个人资料显示 -->
    <div class="show-info">
      <div class="info-header">
        <el-row>
          <el-col :span="3">
            <div class="icon">
              <el-avatar :src="this.userdata.img" :size="60"></el-avatar>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="info-user">{{ this.userdata.userName }}</div>
          </el-col>
        </el-row>
      </div>
      <el-divider></el-divider>
      <!-- 个人资料显示 -->
      <el-descriptions
        class="margin-top"
        :column="1"
        :labelStyle="{ padding: 15 + 'px', width: 150 + 'px', rowCenter }"
        :contentStyle="{ padding: 15 + 'px' }"
        :data="userdata"
        size="small"
        border
      >
        <el-descriptions-item label="ID">
          <template slot="label">
            <i class="el-icon-info"></i>
            id
          </template>
          {{ this.userdata.id }}
        </el-descriptions-item>
        <el-descriptions-item label="手机号">
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          {{ this.userdata.phone }}
        </el-descriptions-item>
        <el-descriptions-item label="身份">
          <template slot="label">
            <i class="el-icon-more"></i>
            身份
          </template>
          管理员
        </el-descriptions-item>
        <el-descriptions-item label="职位">
          <template slot="label">
            <i class="el-icon-s-cooperation"></i>
            职位
          </template>
          {{ this.userdata.occupation }}
        </el-descriptions-item>
        <el-descriptions-item label="性别">
          <template slot="label">
            <i class="el-icon-magic-stick"></i>
            性别
          </template>
          {{ this.userdata.sex }}
        </el-descriptions-item>
        <el-descriptions-item label="邮箱">
          <template slot="label">
            <i class="el-icon-folder-opened"></i>
            邮箱
          </template>
          {{ this.userdata.email }}
        </el-descriptions-item>
        <el-descriptions-item label="工作地点">
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            工作地点
          </template>
          {{ this.userdata.workPlace }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 操作按钮 -->
    <el-button @click="showEditDialog()">修改个人资料</el-button>
    <!-- <el-button @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> -->
    <el-button @click="deleteOneself()">注销账户</el-button>

    <!-- 修改个人资料对话框 -->
    <el-dialog
      title="修改个人资料"
      :visible.sync="editDialogVisble"
      width="50%"
    >
      <el-form
        :model="editForm"
        label-width="70px"
        ref="editFormRef"
        :rules="editFormRules"
      >
        <el-form-item label="用户名" prop="userName" :rules="[{required: true, message: '用户名不能为空'}]">
          <el-input v-model="editForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select placeholder="请选择性别" v-model="editForm.sex">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="occupation">
          <el-input v-model="editForm.occupation"></el-input>
        </el-form-item>
        <el-form-item label="工作地点" prop="workPlace">
          <el-input v-model="editForm.workPlace"></el-input>
        </el-form-item>
        <!-- 上传头像 -->
        <el-form-item label="上传头像">
          <el-upload
            class="avatar-uploader"
            ref="upload"
            action="http://43.139.170.65:9090/common/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :headers='Authorization'
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisble = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import requests from '@/api/ajax';
import { mapState } from 'vuex';
import store from '@/store';
export default {
  name: 'AdInfo',
  data() {
    return {
      rowCenter: {
        'text-align': 'center',
      },
      userdata: {
        userName: 'uuuu',
        id: 'id',
        phone: 'pppppp',
        status: 'status',
        sex: 'ss',
        occupation: 'ooooo',
        email: 'eeee',
        workPlace: 'wwww',
        img: '',
      },
      editForm: {
        userName: '',
        sex: '',
        occupation: '',
        email: '',
        workPlace: '',
      },
      editDialogVisble: false,
      editFormRules: {
        userName: [
          {
            min: 3,
            max: 12,
            message: '长度在 3 到 12 个字符',
            trigger: 'blur',
          },
        ],
      },
      imageUrl: '',
      Authorization: {
        Authorization: window.localStorage.token
      },
      judgeName: '',
      // confirmProfile: false, // 预览图片
      // uploadParam: {
      //   url: requests.baseURL + '/common/upload'
      // },
      // actionUrl: 'http://localhost:9090/common/upload'
    };
  },

  mounted() {
    // 获取用户数据

    requests.get('/users/userMassage').then((res) => {
      // console.log(window.localStorage.token);
      // console.log(window.localStorage.username)
      // console.log(res)
      this.userdata.userName = res.data.userName;
      this.userdata.id = res.data.id;
      this.userdata.phone = res.data.phone;
      this.userdata.sex = res.data.sex;
      this.userdata.occupation = res.data.occupation;
      this.userdata.workPlace = res.data.workPlace;
      this.userdata.email = res.data.email;

      if (res.data.img == null) {
        // 设置默认头像
        this.userdata.img =
          'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';
      } else {
        this.userdata.img = res.data.img;
      }
      if (res.data.status == 2) {
        this.userdata.status = '管理员';
      } else if (res.data.status == 1) {
        this.userdata.status = '编辑';
      } else {
        this.userdata.status = '用户';
      }
    });
    
  },

  methods: {
    // header() {
    //   return { Authorization: window.localStorage.getItem('token') }
    // },
    deleteOneself() {
      this.$messagebox.confirm('此操作将注销您现在登录的账户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(
        () => {
          requests.delete('/users/cancel')
          this.$message.success("您已注销账户~")
          window.localStorage.clear()
          this.$router.push('/login')
        }
      )
    },
    editUserInfo() {
      // 发起修改用户信息的数据请求
      // console.log('11111111');
      this.$refs['editFormRef'].validate((valid) => {
        if(valid) {
          requests.put('/users/changeMassage', this.editForm).then((res) => {
            if(res.code == 1) {
              store.commit('$_setUsername', this.editForm.userName);
              // this.$message.success('修改成功')
              // console.log("修改成功");
          }
            else if(res.code == 0 ){
              // this.$message.error(res.msg)
              console.log(res.msg);
            }
          // window.localStorage.username = this.editForm.userName;
          // console.log('全局已变为' + store.state.username);
          });
          this.editDialogVisble = false
          this.$router.go(0)
        } else {
            this.$message.error('用户名不能为空')
            return false;
          }
      })
    },
    showEditDialog() {
      // 显示修改弹窗
      this.editDialogVisble = true;
      this.editForm.userName = this.userdata.userName;
      this.editForm.occupation = this.userdata.occupation;
      this.editForm.email = this.userdata.email;
      this.editForm.workPlace = this.userdata.workPlace;
      this.editForm.sex = this.userdata.sex;
    },
    handleAvatarSuccess(res, file, filelist) {
      // 下载头像
      this.imageUrl = URL.createObjectURL(file.raw);
        // this.imageUrl = `http://localhost:9090/common/download?name=${res.data}`
          // this.userdata.img = res.data
          requests.get('/users/userMassage').then(
            (re) => {
              if(re.code == 1) {
                console.log(re.data.img);
              } else {
                console.log(re.msg);
                this.$message.error(re.msg)
              }
              
            }
          )
      // this.userdata.img = res.data
    },
    beforeAvatarUpload(file) {
      // 头像图片预处理
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    // actionUpload(){
    //   requests.post('/common/upload').then(
    //     (res) => {
    //       if(res.code == 0){
    //         this.$message.error('上传失败')
    //       }
    //     }
    //   )
    // }
  },
  computed: {
    ...mapState({
      username: (state) => {
        return state.login.username;
      },
    }),
  },
};
</script>

<style lang="less" scoped>
.info_container {
  width: 1000px;
  margin-left: 100px;
  margin-top: 50px;
  padding-left: 50px;
  padding-bottom: 50px;
  padding-right: 50px;
  padding-top: 30px;

  font-size: larger;
  background-color: #fff;
}
.show-info {
  height: 500px;
}
.el-descriptions {
  font-size: large;
  line-height: 60px;
}
.el-descriptions-item__label:not(.is-bordered-label) {
  padding-left: 20px;
}
.info-user {
  margin-top: 20px;
}
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  width: 178px;
  // cursor: pointer;
  // position: relative;
  // overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
